<template>
    <div class="app-container">
        <div class="filter-container">
            <!-- <el-input v-model="listQuery.tableName" size="small" placeholder="请输入表名" clearable class="filter-item" />
            <el-input v-model="listQuery.annotations" size="small" placeholder="请输入表注释" clearable class="filter-item" />
            <el-select v-model="listQuery.module" placeholder="模块名称" clearable size="small">
                <el-option v-for="module in moduleName" :key="module" :label="module" :value="module" />
            </el-select>
            <el-select v-model="listQuery.type" placeholder="类型" clearable size="small" style="margin: 0 10px;">
                <el-option v-for="type in typeName" :key="type" :label="type" :value="type" />
            </el-select> -->

            <!-- <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button> -->
            <!-- <el-button size="small" icon="el-icon-refresh" @click="refresh">重置</el-button> -->
            <el-button size="small" @click="$router.go(-1)">返回</el-button>
        </div>
        <el-table v-loading="listLoading" :data="tableData" element-loading-text="Loading" border fit height="580px"
            class="table-container" highlight-current-row>
            <!-- <el-table-column type="index" label="序号" prop width="50"></el-table-column> -->
            <el-table-column label="字段序号" align="center" prop="COLUMN_ID"></el-table-column>
            <el-table-column label="字段名" align="center" prop="COLUMN_NAME"> </el-table-column>
            <el-table-column label="字段注释" align="center" prop="COMMENTS"> </el-table-column>
            <el-table-column label="数据类型" align="center" prop="DATA_TYPE"></el-table-column>
            <el-table-column label="数据长度" align="center" prop="DATA_LENGTH"></el-table-column>
            <el-table-column label="是否允许为空" align="center" prop="NULLABLE">
            </el-table-column>
            <el-table-column label="数值精度（仅数值类型）" align="center" prop="DATA_PRECISION">
            </el-table-column>
            <el-table-column label="小数位数（仅数值类型）" align="center" prop="DATA_SCALE">
            </el-table-column>
        </el-table>
        <!-- <pagination style="margin-top: 20px" v-show="total > 0" :total="total" :page.sync="listQuery.pageNo"
            :limit.sync="listQuery.pageSize" @pagination="fetchData" /> -->
    </div>
</template>

<script>
import { tableColsList } from '@/http/api/myHttp.js'
import { formatX } from "@/utils/fontSize"
export default {
    components: {},
    data() {
        return {
            total: 0,
            tableData: [],
            listLoading: false,
            listQuery: {
                pageNo: 1,
                pageSize: 10,
                module: "",
                type: "",
                tableName: "",
                annotations: ""
            },
            moduleName: ["智慧林业", "环境卫生", "公园绿地", "综合评价"],
            typeName: ["物联感知数据", "结果数据", "基础数据", "市级数据", "区级数据", "业务数据", "视频数据"]
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        checkDetails() {
            this.router.push({

            })
        },
        formatX,
        search() {
            this.fetchData()
        },
        refresh() {
            this.listQuery = {
                pageNo: 1,
                pageSize: 10,
                date: ""
            }
            this.fetchData()
        },
        fetchData() {
            this.listLoading = true
            tableColsList({
                tableName: this.$route.query.tableName
            }).then((res) => {
                this.listLoading = false
                if (res.code == 0) {
                    this.tableData = res.data
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.app-container {
    // box-sizing: border-box;
    width: 100%;
    height: 100%;
    // padding: 18px 24px;
}

.filter-container {
    display: flex;
    justify-content: flex-start;
}

.filter-item {
    width: 300px;
    margin-right: 10px;
}

.el-table {
    ::v-deep {
        margin-top: 20px;

        .el-table__header {
            border-radius: 6px;
            overflow: hidden;
        }

        .el-table__cell {
            height: 50px;
            padding: 0;
        }

        .is-leaf {
            background-image: linear-gradient(to top, rgba(128, 191, 255, 1), rgba(51, 153, 255, 1));
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0px;
            line-height: 24px;
            color: rgba(255, 255, 255, 1);
            border-right: 1px solid white;
        }
    }
}

.operate_area {
    width: 80px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;

    img {
        cursor: pointer;
    }
}
</style>
